<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>

<%
    String path = request.getContextPath();
    String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + path;
    //http://localhost:8080/logistics/
%>

<html>
<head>

    <base href="<%=basepath%>">

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <%--bootstrap样式--%>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="lib/bootstrap-table/bootstrap-table.min.css"/>

    <title>客户管理</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 物流管理 <span
        class="c-gray en">&gt;</span> 客户管理
</nav>
<div class="page-container">

    <span id="toolbar" class="l">
        <a href="javascript:;" onclick="customer_batch_del()" class="btn btn-danger radius"><i
                class="Hui-iconfont">&#xe6e2;</i>批量删除</a>

        <a href="javascript:;" onclick="role_add()" class="btn btn-primary radius">
            <i class="Hui-iconfont">&#xe600;</i> 添加客户</a>
    </span>
    <table id="dataTable"></table>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">

    /*
      * 文档加载完毕以后执行代码
      * */
    $(function () {
        $("#dataTable").bootstrapTable({
            url: 'customer/list.do',
            responseHandler: function (res) {
                /*
                *
                res: 后台分页对象PageInfo返回对应的json对象
				res.list : 结果集
				res.total : 总记录数

                * */
                var data = {rows: res.list, total: res.total};
                return data;
            },
            pagination: true,
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded', //条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            search: true, //是否显示搜索框
            pageNumber: 1,  //默认的页面,第一页
            pageSize: 10,   //默认每页条数
            pageList: [10, 25, 50, 100],      //每页显示的条数

            sidePagination: "server", //是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right',  //底部分页条
            showRefresh: true,          //是否显示刷新按钮
            columns: [
                {
                    checkbox: true //显示前台的复选框(多选)
                },
                {
                    field: 'customerId',
                    title: '编号'
                },
                {
                    field: 'customerName',
                    title: '姓名'
                },
                {
                    field: 'phone',
                    title: '手机号码'
                },
                {
                    field: 'email',
                    title: '邮箱'
                },
                {
                    field: 'address',
                    title: '地址'
                },

                {
                    field: 'gender',
                    title: '性别',
                    formatter: genderFormatter
                },

                {
                    field: 'idCard',
                    title: '身份证'
                },

                {
                    field: 'realname',
                    title: '业务员'
                },

                {
                    field: 'section',
                    title: '区间'
                },

                {
                    field: 'remark',
                    title: '客户描述'
                },
                {
                    field: 'customerId',   //操作列的设置(删除,修改)
                    title: '操作',
                    align: 'center',
                    formatter: operationFormatter
                }],
            /*设置ajax请求后台的参数
           * params:bootstraptable传递给后台的默认参数名称
           * 函数可以直接返回一个参数对象，设置给传递给后台参数名称和值
           * */
            queryParams: function (params) {

                var paramsData = {
                    keyword: params.search,                   //搜索栏搜索
                    pageSize: params.limit,                   //  每页显示多少数据
                    pageNum: params.offset / params.limit + 1
                };   //  10/0 +1 =1, 10/10 +1 =2, 20/10 +1 =3


                return paramsData;
            }
        });

    });


    /* 操作权限 添加、删除*/
    function operationFormatter(value, row, index, field) {
        var html = "<span onclick='customer_del(" + value + ")' style='color:blue;cursor: pointer' class='glyphicon glyphicon-trash'></span>&nbsp;&nbsp;&nbsp;";
        html += "<span onclick='customer_update(" + value + ")' style='color:blue;cursor: pointer' class='glyphicon glyphicon-pencil'></span>";

        return html;
    }

    /*
  列格式化函数
  value: 值   性别
  row:   rows  整行的数据   row:[object Object]
  index: index    下标      （从0开始）
  field: fieId  字段名称

  此函数返回一个字符串，html自动解析渲染效果
  * */
    function genderFormatter(value, row, index, field) {


        var html="男";
        if (value == 2) {
            html="女";
        }

        return html;


    }


    function customer_del(customerId) {
        layer.confirm('您确定要删除此条吗?', function () {

            //发送ajax请求数据删除数据
            //jQuery.get(url, [data], [callback], [type])
            $.get("customer/delete.do", {customerId: customerId}, function (data) {
                //icon:对应的提示图标  time:删除后1.5秒后关闭弹窗
                layer.msg(data.msg, {icon: data.code, time: 1500}, function () {

                    //操作成功，刷新Bootstarp-table
                    if (data.code == 1) {
                        //刷新表格
                        refreshTable();
                    }

                });
            })

        });
    }

    /*刷新表格*/
    function refreshTable() {

        $("#dataTable").bootstrapTable('refresh');
    }


    /*角色-添加*/
    function role_add() {
        layer.open({
            type: 2,
            maxmin: true,
            area: [$(window).width() + 'px', $(window).height() + 'px'],
            title: '添加角色',
            content: 'customer/edit.do'
        });

    }

    /*修改角色*/
    function customer_update(customerId) {
        layer.open({
            type: 2,
            maxmin: true,
            area: ['800px', '500px'],
            title: '修改角色',
            content: 'customer/edit.do?customerId=' + customerId
        });
    }

    /*批量删除*/
    function customer_batch_del() {
        //获取bootstraptable选中的列  $table.bootstrapTable('getSelections').
        var rows = $("#dataTable").bootstrapTable('getSelections');

        if (rows.length == 0) {
            layer.msg("最少选择一条需要删除的数据", {icon: 0});
            return false;
        }

        //获取需要删除id的所有值
        var userIds = [];
        for (var i = 0; i < rows.length; i++) {
            var user = rows[i];
            //将用户id添加到数组
            userIds.push(user.customerId);

        }

        var userIdsStr = userIds.toString();

        layer.confirm('您确定要删除这些数据吗?', function () {
            //发送ajax请求数据删除数据
            //jQuery.get(url, [data], [callback], [type])
            $.post("role/deleteAll.do", {str: userIdsStr}, function (data) {
                layer.msg(data.msg, {icon: data.code, time: 1500}, function () {

                    //操作成功
                    if (data.code == 1) {
                        //刷新表格
                        refreshTable();
                    }
                })
            })

        });
    }

</script>
</body>
</html>